<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%
	String bathPath = request.getContextPath();
	pageContext.setAttribute("bathPath", bathPath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>控制器管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js" ></script>
<link rel="stylesheet" href="${bathPath}/frame/layui/css/layui.css"  media="all">
<script src="${bathPath}/frame/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<link rel="stylesheet" href="${bathPath}/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="${bathPath}/layui_ext/dtree/font/dtreefont.css">
</head>
<style type="text/css"> 
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
     top: 50%;
     transform: translateY(-50%);    
}
</style>
<body>
<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="height:490px;width:910px;margin-left:20px;">
  <ul class="layui-tab-title">
    <li lay-id="22">控制器管理</li>
  </ul>
  <div class="layui-tab-content" style="height:450px; width:910px">
    <div class="layui-tab-item layui-show" >
  <form id="myform" class="layui-form layui-form-pane">
 <div class="demoTable" style="margin-top:0px;margin-left:30px;"> 
</div> 
</form>
<!-- 页面 src="${bathPath}/aDKController/Controller.action" -->
<div>
<iframe id="myIframe" name="mainIframe" frameborder="0" style="position:absolute; top:51px; width:342px;min-width:342px;height:460px;margin-left:560px;" src="${bathPath}/aDKController/Controller.action" ></iframe>
</div>
<!-- <table class="layui-hide"  id="demo"></table> -->
<table class="layui-hide"  id="test"  lay-filter="test"  ></table>
</div>
<script src="${bathPath}/frame/layui/layui.js" charset="utf-8"></script>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" onclick="add()">增加</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
  </div>
</script>
<script>
		layui.use('element', function() {
				var $ = layui.jquery, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

				//触发事件
				var active = {
					tabAdd : function() {
						//console.log(url);
						//新增一个Tab项
						element.tabAdd('demo', {
							title : $(this).attr("data-title"), //用于演示
							
							content : '<iframe data-frameid="'+$(this).attr("data-id")+'" scrolling="auto" frameborder="0" src="'+$(this).attr("data-url")+'" style="width:1220px;height:650px;"></iframe>' ,
							id : $(this).attr("data-id")
						//实际使用一般是规定好的id，这里以时间戳模拟下
						})
						var id = $(this).attr("data-id");
						
						element.tabChange('demo', id); //切换到：用户管理
		                $("iframe[data-frameid='" + id + "']").attr("src", $("iframe[data-frameid='" + id + "']").attr("src"))//切换后刷新框架
					   
					},
					tabDelete : function(othis) {
						//删除指定Tab项
						element.tabDelete('demo', '44'); //删除：“商品管理”

						othis.addClass('layui-btn-disabled');
					},
					tabChange : function() {
						//切换到指定Tab项
						element.tabChange('demo', '22'); //切换到：用户管理
					}
				};

				$('.site-demo-active').on('click', function() {
					var othis = $(this), type = othis.data('type');
					active[type] ? active[type].call(this, othis) : '';
				});

				//Hash地址的定位
				var layid = location.hash.replace(/^#test=/, '');
				element.tabChange('test', layid);

				element.on('tab(test)', function(elem) {
					location.hash = 'test=' + $(this).attr('lay-id');
				});

			});
		
		//表格事件
		layui.use('table', function(){
		  var table = layui.table;
		  var layTableId="test";
		  var flag=0; //判断表格是否在增加数据
		//返回data数据给表格
		 var laydata="";
		 function getdata(parm){
			 $.ajax({
					type:"POST",
					data:parm,
					async:false,  //默认true,异步
					url:"${bathPath}/aDKController/selectAll.action",
					success:function(data){
							laydata=data;
				    }
				});  
			 return laydata;
		 }
		 
		//console.log(laydata);
		 //搜索事件
		  function selectall()
		  {
			  var parm = $('#myform').serialize(); //获取表单所有数据
			  //alert(parm);
			 // alert(demoReload);
		  	//这里以搜索为例
		  	table.reload('test',{
		  		data:getdata(parm),  //返回查询后的data直接赋值
		  	    page: {
		  	    curr: 1 //重新从第 1 页开始
		  	  }
		  	});
		  	}
		  //监听头工具栏事件
		  	table.on('toolbar(test)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id)
		    ,data = checkStatus.data; //获取选中的数据
		    //var length = table.cache[layTableId].length;   
		    switch(obj.event){
		      case 'delete':   //删除一行
		        if(data.length === 0){
		          layer.msg('请选择一行');
		        } else {
		        	//alert(data);
		        	layer.confirm("确定删除么？", {btn: ['确定', '取消'], title: "提示"}, function(){
					 $.ajax({
						type:"POST",
						async:true,  //默认true,异步
						url:"${bathPath}/aDKController/deletecontroller.action",  //后台增删改查的action
						data:"op=del&data="+JSON.stringify(data), //选中的数据信息
						success:function(data){
							if(data!="SUCCESS"){
								layer.msg(data);
								selectall();
							}
					    }
					}); 
		        	});
		        }
		      break;
		  
		  };
		  });
		//监听行工具栏事件
		table.on('row(test)', function(obj){
		 var data = obj.data //获得当前行数据
		,layEvent = obj.event; //获得 lay-event 对应的值
		 if(layEvent === 'cha'){
			 //alert(data.ctrlAddr);
		 cha(data.ctrlAddr);
		}  
		//var data = obj.data;
		//alert(JSON.stringify(data));
		//跳转到控制器设置页面
		$("#myIframe").attr("src","${bathPath}/aDKController/findId.action?id="+JSON.stringify(data.autoID)+"&ctrlAddr="+JSON.stringify(data.ctrlAddr));

		   /*  layer.alert(JSON.stringify(data), {
		      title: '当前行数据：'
		    }); */ 
		    //标注选中样式
		    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
		});       	
		        	
		        	
		//监听排序
		  table.on('sort(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
		  console.log(obj.field); //当前排序的字段名
		  console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
		  console.log(this); //当前排序的 th 对象
		  parm="sort="+obj.field+"&order="+ obj.type;
		  //alert(parm);
		  table.reload('test', {
		    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
		    ,data:getdata(parm)
		  });
		}); 
		//文本框搜索
				  $('.demoTable .layui-btn').on('click', function(){
				   /*  var type = $(this).data('type');
				    active[type] ? active[type].call(this) : ''; */
				    selectall();
				  });
		  //渲染表格
		 table.render({
			    elem: '#test'
			    ,id: layTableId
			    ,url:'${bathPath}/aDKController/selectAll.action'
			 	//,data:getdata()
			    ,toolbar: '#toolbarDemo' 
			    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			    ,size:'sm'//小表格
			    ,width:550
			    ,cols: [[
			    	{type: 'checkbox', fixed: 'left',align:'center',width:'10%'}
					,{type: 'numbers',title:'序号', fixed: 'left',align:'center',width:'15%'}
			      	,{field: 'iP',title:'地址', fixed: 'left',align:'center',width:'50%'}
			      	,{field: 'location',title:'名称', fixed: 'left',align:'center',width:'25%'}
			    ]]
			    ,page: true //开启分页
			    ,limit:10 //默认十条数据一页
		        ,limits:[10,20,30,40,100]  //数据分页条
			  }); 
		});

		//增加部门弹出框
		function add(){
			top.layer.open({
				  title:'增加控制器',
				  type: 2,
				  area:['460px', '400px'],
				  offset:['230px','550px'],
				  content: '${bathPath}/aDKController/index1.action',
				  success:function(layero,index){
					  layer.iframeAuto(index);
				  },
				  end: function () {
					  location.reload();
					  }
				  }); 
		}
	</script>
	</div>
	</div>
</body>
</html>